﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果</title>

<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
body{background:#ecfaff;}
/* play */
.play{width:470px;height:150px;overflow:hidden;position:relative;margin:150px auto 0;}
.play ol{position:absolute;right:5px;bottom:5px;z-index:99999;}
.play ol li{float:left;margin-right:3px;display:inline;cursor:pointer;background:#fcf2cf;border:1px solid #f47500;padding:2px 6px;color:#d94b01;font-family:arial;font-size:12px;}
.play ol li.active{padding:3px 8px;font-weight:bold;color:#ffffff;background:#ffb442;position:relative;bottom:2px;}
.play ul{position:absolute;top:0;left:0;z-index:1;}
.play ul li{width:470px;height:150px;float:left;}
.play ul img{float:left;width:470px;height:150px;}
</style>

<script type="text/javascript" src="move2.js"></script>
<script type="text/javascript">
window.onload=function (){
	var oDiv=document.getElementById('play');
	var aLi=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
	
	var aUl=oDiv.getElementsByTagName('ul')[0];
	
	var now=0;
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].index=i;
		aLi[i].onclick=function()
		{
			now=this.index;
			tab();
		};
	}
	
	function tab(){
		for(var i=0;i<aLi.length;i++)
			  {
				 aLi[i].className=''; 
			  }
		aLi[now].className='active';
			
		startMove(aUl,{top:-150*now});
		
	}
	function next(){
		
		now++;
		if(now==aLi.length)
		{
		  now=0;
		}
	
		tab();
	}
	timer=setInterval(next,2000);
	oDiv.onmousemove=function(){
		clearInterval(timer);
	}
	oDiv.onmouseout=function(){
		timer=setInterval(next,2000);
	}
	
};
</script>
</head>

<body>

<div class="play" id="play">
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
	<ul>
		<li><a href="http://www.17sucai.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
	</ul>
</div>

</body>
</html>
